<!-- 头部 -->
<template>
  <div class="leftTopBox-map">
    <div class="boxline">
      <h2 class="titleText u-m-b-10">当日学生体温/心率监测(当前功能未开放)</h2>
      <div class="region-echarts" v-if="pageflag" style="height: 100%">
        <Echart
          id="leftBottom"
          :options="regionOptions"
          class="left_bottom_inner"
          v-if="pageflag"
          ref="charts"
          style="height: 100%"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
export default {
  name: "leftTopBox",
  components: {
    Echart,
  },
  props:{
     schooleId:{
       type:[String, Number],
       default:0
     }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 数值
    };
  },

  mounted() {
    this.getDataHandler();
  },
  methods: {
    async getDataHandler() {
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get("/data_center/getTodayMonitor", {params});
      // console.log(data,'=======data')
      try {
        if (data.code === 0) {
          this.getData(data.data);
        }
      } catch {
        console.log("error");
      }
    },
    getData(data) {
      this.pageflag = true;
      const titleData = [];
      const aList = [];
      const bList = [];
      data.forEach((iv) => {
        titleData.push(iv.title);
        aList.push(iv.avg_temperature);
        bList.push(iv.avg_heart_rate);
      });
      if (data) {
        this.init(titleData, aList, bList);
      } else {
        this.pageflag = false;
      }
    },

    init(xData, yData, yData2) {
      this.regionOptions = {
        // color: ["#3778D1", "#26A5E4 "],
        legend: {
          icon: "circle",
          textStyle: {
            color: "#ffffff",
          },
          data: ["体温", "心率"],
        },
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: true, // 不留白，从原点开始
          axisLabel: {
            color: "#fff",
            fontWeight: "500",
          }
        },
        yAxis: {
          type: "value",
          max: 100, // 最大值
          min: 0, // 最小值
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.3)",
            },
          },
          axisLabel: {
            color: "#fff",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          // backgroundColor: "rgba(17, 43, 107, 1)",
          backgroundColor: "#fff",
          borderColor: "#fff",
          textStyle: {
            color: "#000",
          },
          // formatter: function (params) {
          //   var relVal = params[0].name;
          //   for (var i = 0; i < params.length; i++) {
          //     relVal +=
          //       "<br/>" +
          //       params[i].marker +
          //       params[i].seriesName +
          //       " : " +
          //       params[i].value +
          //       "ppm";
          //   }
          //   return relVal;
          // },
        },
        grid: {
          // 布局
          x: 50,
          y: 50,
          x2: 30,
          y2: 30,
        },
        series: [
          {
            data: yData,
            name: "体温",
            type: "line",
            smooth: true,
            itemStyle:this.itemStyleBack('#0F40F5','#ccc','value','#0F40F5')
            // stack: 'Total'
            // stack: 'Total'
          },
          {
            data: yData2,
            name: "心率",
            type: "line",
            smooth: true,
            itemStyle:this.itemStyleBack('#68BBC4','#ccc','value','#68BBC4')

          },
        ],
      };
    },
    itemStyleBack(color,borderColor,val,labelColor) {
      return {
        normal: {
          color: color,
          borderColor: borderColor,
          barBorderRadius: 6,
          label: {
            show: true,
            position: "top",
            color: labelColor,
            formatter: function (p) {
              return p[val] > 0 ? p[val] : "";
            },
          },
        },
      };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.leftTopBox-map {
  width: 100%;
  height: 100%;
  .boxline {
    height: 100%;
    // padding-bottom: 0px;
  }
}
</style>
